<template>
  <starModal
    :config="modalConfig"
    @iconClick="
      nav.navigationShow = !nav.navigationShow;
      nav.navigationFloat = true;
    "
  >
    <div class="content">
      <!-- <starTabs :config="tabDefaultConfig">
        
      </starTabs> -->
      <starPageCfg></starPageCfg>
      <!-- <Row ref="printArea">
      <Row style="width:800px;height:1000px;border:1px solid;margin:10px 0px;">
        <Col span="12" style="height:100%;border:1px solid;">abc1</Col>
        <Col span="12" style="height:100%;border:1px solid;">2</Col>
      </Row>
    </Row> -->
      <!-- <starCardNav :nav="nav">
        <navTree ref="navTree" :data="dataSet.track"></navTree>
      </starCardNav>
      <Tabs class="tab-wrapper" v-model="dataSet.currentEntry" name="entry" @on-click="tabEntrySelect">
        <TabPane :label="'入口：'" :name="''" tab="entry">
          <AtomForm></AtomForm>
        </TabPane> -->
      <!-- <template v-for="entry in dataSet.entries">
          <TabPane :label="'入口：'+entry.title" :name="entry.id" tab="entry">
            <Tabs class="subtab-wrapper" v-model="entry.subTab" :name="entry.id" @on-click="tabChildSelect">
              <template v-for="ent in dataSet.track.filter(e=>e.entry===entry.id)">
                <TabPane :label="ent.title" :name="ent.id" :tab="entry.id">
                  <component :is="ent.tag" :entry="ent"></component>
                </TabPane>
              </template>
            </Tabs>
          </TabPane>
        </template> -->
      <!-- </Tabs> -->
      <!-- </div> -->
      <!-- <div slot="footer">
      <slot name="footer">
        <Icon type="md-print" @click.native="print"></Icon>
        <template v-for="item in cloneConfig.buttons">
          <Button v-if="item.show" v-bind="item" @click="$emit('click', item,config)">{{
            item.text
          }}</Button>
        </template>
      </slot> -->
    </div>
  </starModal>
</template>

<script>
import { merge, cloneDeep } from "lodash";
import * as _ from "lodash";
import ancMixin from "./ancMixin";
import cfgFormList from "public/components/formList/cfgFormList.vue";
export default {
  components: { cfgFormList },
  name: "AtomConfigTools",
  mixins: [ancMixin],
  data() {
    return {
      nav: {
        navigationFloat: false,
        navigationShow: false,
      },
      modalConfig:{}
    };
  },
  props: {
    config: {
      default: () => {
        return {};
      },
    },
  },
  watch: {
    config: {
      handler(val) {
        this.modalConfig = _.merge(this.modalConfig, this.config);
      },
      deep: true,
    },
  },
  computed: {
    modalDefaultConfig() {
      return {
        show: false,
        title: "查询",
        loading: false,
        width: 0,
        height: "70vh",
        draggable: true,
        mask: false,
        closable: true,
        widthRatio: 0.7,
        buttons: [
          {
            show: true,
            type: "default",
            text: "取消",
          },
          {
            show: true,
            type: "primary",
            text: "确定",
            loading: false,
          },
        ],
      };
    },
    tabDefaultConfig() {
      return {
          name: "controlsConfig", //tabs的名称，tabs嵌套使用时，必须唯一
          value: "0", //tabs的默认页码
          type: "card", //tabs类型,line和card
          // style: { height: "100%" }, //tabs样式
          menu: false, //是否显示菜单
          menus: [
            //菜单配置，DropdownItem配置
            {
              title: "", //菜单文本
              menuStyle: {},
            },
          ],
          extra: {
            icon: "md-apps", //额外菜单图标
            style: {}, //额外菜单样式
            items: [
              //额外菜单项
              {
                title: "", //菜单文本
                style: {}, //菜单样式
              },
            ],
          },
          tabs: [
            {
              icon: "md-apps", //图标
              label: "starPage", //标签
              menu: true, //是否显示菜单
            },
          ],
        }
    },
  },
  created() {},
  mounted() {
    this.$nextTick(()=>{
      this.modalConfig = _.merge(this.modalDefaultConfig,this.config)
    })
  },
  methods: {
    print() {
      var copiedElement = this.$refs.printArea.$el.cloneNode(true);
      var a = copiedElement.children[0].cloneNode(true);
      var b = copiedElement.children[0].cloneNode(true);
      var c = copiedElement.children[0].cloneNode(true);
      var d = copiedElement.children[0].cloneNode(true);
      copiedElement.append(a);
      copiedElement.append(b);
      copiedElement.append(c);
      copiedElement.append(d);
      console.log(copiedElement);
      this.$print(copiedElement);
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  display: flex;
  position: relative;
  width: 100%;
  height: 70vh;
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.tab-wrapper {
  width: 100%;
  height: 100%;
  margin: 0px 10px;
  border: 1px solid #dcdee2;
}
.subtab-wrapper {
  width: 100%;
}
.tree-wrapper {
  height: 100%;
  overflow: auto;
}
</style>